<template>
  <div>
    <Bubble
      :content="`🐱${$t('customer.chat.originText')}：${content}`"
      :loading="isLoading"
      typing
      variant="borderless"
      @finish="writingFinishHandle"
      @start="writingStartHandle"
    >
      <template #loading>
        <SvgSpinners class="h-[25px] w-[25px] text-blue-600" />
      </template>
    </Bubble>
  </div>
</template>

<script setup lang="ts">
import { SvgSpinners } from '@vben/icons';

// 翻译加载状态
import { useCounter } from '#/utils/chatInjectionState';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
  // 消息体
  content: {
    type: String,
    default: '',
  },
});
const injectedState = useCounter(); // 获取组件注入状态
const isLoading = defineModel<Boolean>('isLoading'); // 是否加载
const translateStatus = defineModel<number | string>('translateStatus'); // 翻译状态
// 气泡输出完成事件监听
const writingFinishHandle = async () => {
  isLoading.value = false;
  translateStatus.value = 'delete';
};

// 气泡输出开始事件监听
const writingStartHandle = async () => {
  // 翻译内容渲染完成后，再次确保滚动到底部
  injectedState.scrollToBottom(props.id);
};
</script>
